<html>
    <head>
        <title>Rubra</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css"  />
        <link rel="stylesheet" href="css/grid.css" type="text/css" />
        <link rel="stylesheet" href="css/general.css" type="text/css" />
        <link rel="stylesheet" href="css/menu.css" type="text/css" />
		<link rel="stylesheet" href="css/forms.css" type="text/css" />
        <link rel="stylesheet" href="css/css3.css" type="text/css"  />
        <link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />

        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/modernizr-1.7.min.js"></script>
        <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/crocus/util/jquery.validate.extend.js"></script>	
        <script type="text/javascript" src="js/jquery-validate/localization/messages_es.js"></script>	
        <script type="text/javascript" src="js/jquery.serializeObject.js"></script>
        <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.datalink2.js"></script>
        <script type="text/javascript" src="js/jquery.tmpl2.js"></script>
        <script type="text/javascript" src="js/jquery.mockjax.js"></script>
        
        <script>
        </script>
        
        <style>
            form .s_column div.radio_column {
                
                width: 50%;
            }
            form .s_column div.radio_column label {
                float: left;
                width: 25%;
            }
            form .s_column div.radio_column input {
                float: left;
                text-align: left;
                width: 10%;
            }
            form textarea {
                width: 98%;
                display: block;
                height: 10em;
            }
            .label {
                display: block;
                height: 20px;
                font-size: 1.2em;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="head">
            <div class="row logo">
                <div class="col col_7">Rubra</div>
            </div>
            <div class="row">
        
                <ul class="menu">
                    <li><a href="#"><span>Administrador de eventos</span></a></li>
                    <li><a href="#"><span>Administrador de pasajeros</span></a></li>
                    <li><a href="#"><span>Administrador de usuarios</span></a></li>
                    <li><a href="#"><span>Eventos archivados</span></a></li>
                </ul>
                <div class="breadcrumb">
                    <span class="left"></span>
                      <ul>
                        <li><a href="#">Eventos</a></li>
                        <li><a href="#">un Evento</a></li>
                        <li><a href="#">Pasajeros</a></li>
                        <li><a href="#" class="active">Registro Pasajero</a></li>
                      </ul>
                    <span class="right"></span>
                </div>        
            </div>
                   
        </div>
        <div class="content">
            <div class="row">
                <h2>Pasajero</h2>
                <div class="contenedor_mensaje col col_16">
		            <div  id="mensaje"></div>
	            </div>
            </div>
            <div class="row steps content_form">
                <div class="col col_3">&nbsp;</div>
                <div class="col col_10">
                    <form id="form_pasajero" name="form_pasajero">
			            <fieldset class="step s_column" id="seccion_pasajero">
				        <legend>Pasajero</legend>
				            <div>
					            <label for="pasajero.persona.descripcion">Pasajero</label> 
					            <input id="pasajero.persona.descripcion" name="pasajero[]persona[]descripcion type="text" class="required"  data-jq-linkfrom="pasajero.persona.descripcion"/>
					            <input type="hidden" name="pasajero[]persona[]id" id="persona_id" data-jq-linkto="persona.id" data-jq-linkfrom="persona.id"/>
				            </div>
				            <div class="radio_column doble">
				                <span class="label">Acompa&ntilde;ante</span>
				                <div>
					                
					                <input id="pasajero.conAcompaniante" name="pasajero[]acompaniante" type="radio" data-jq-linkto="acompaniante" data-jq-linkfrom="acompaniante" value="true"/>
					                <label for="pasajero.conAcompaniante">Si</label> 
					                
					                <input id="pasajero.sinAcompaniante" name="pasajero[]acompaniante" type="radio"  data-jq-linkto="acompaniante" data-jq-linkfrom="acompaniante" value="false"/>
					                <label for="pasajero.sinAcompaniante">No</label>
					            </div>
				            </div>
				            <div>
					            <label for="pasajero.miembro">Acompa&ntilde;ante de</label> 
					            <input id="pasajero.miembro" name="pasajero[]miembro" type="text" data-jq-linkto="miembro" data-jq-linkfrom="miembro"/>
				            </div>
				            <div>
					            <label for="pasajero.observacion">Observaciones</label> 
					            <textarea id="pasajero.observacion" name="pasajero[]observacion" data-jq-linkto="observacion" data-jq-linkfrom="observacion"> </textarea>
				            </div>
				        </fieldset>
				        <button class="button" id="crear_actualizar">Crear </button>
                        <button class="button" id="volver" class="cancel">Volver al listado</button>
				    </form>
				    
                </div>
                <div class="col col_3">&nbsp;</div>
            </div>        
        </div>
        <div class="row footer">
        
        </div>
    </body>
</html>
